<template>
  <el-row style="padding: 15px 0 15px 0;">
    <el-col :span="4">
      <span style="line-height: 30px;">{{ keyName }}{{ syncValue }}</span>
    </el-col>
    <el-radio-group v-model="myValue" @change="change">
      <el-radio label="true" class="radio"></el-radio>
      <el-radio label="false" class="radio"></el-radio>
    </el-radio-group>
  </el-row>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class BooleanView extends Vue {
  @Prop(String)
  public keyName: string;

  @Prop(Boolean)
  public value: boolean;

  public myValue: string;

  constructor(...args: any) {
    super(...args);
    this.myValue = this.value ? "true" : "false";
  }

  public change(value: boolean) {
    this.$emit("change", this.keyName, value);
  }

  get syncValue() {
    this.myValue = this.value ? "true" : "false";
    return this.value ? "" : "";
  }
}
</script>

<style scoped>
.radio /deep/ .el-radio__label {
    color: #000;
}
</style>